<template>
    <div class="Profile-attendance">
        <div class="attendance-switchTab clear">
            <ul class="clear">
                <li :class="{'active': switchIndex === 'all'}" @click="SelectTab('all')">
                    <router-link to="/all">
                        <em>{{account}}</em>
                        <span>打卡数</span>
                    </router-link>
                </li>
                <li :class="{'active': switchIndex === 'inner'}" @click="SelectTab('inner')">
                    <router-link to="/late">
                        <em>{{lateCount}}</em>
                        <span>迟到数</span>
                    </router-link>
                </li>
                <li :class="{'active': switchIndex === 'outer'}" @click="SelectTab('outer')">
                    <router-link to="/miss">
                        <em>{{missCardCount}}</em>
                        <span>缺卡数</span>
                    </router-link>
                </li>
                <li :class="{'active': switchIndex === 'abnormal'}" @click="SelectTab('abnormal')">
                    <router-link to="/out">
                        <em>{{outerCount}}</em>
                        <span>外勤数</span>
                    </router-link>
                </li>
                <li>
                    <div class="circular-wrap" ref="PercentageCircular">
                        <div class="left-half">
                            <div class="inner" ref="leftCircular"></div>
                        </div>
                        <div class="right-half">
                            <div class="inner" ref="rightCircular"></div>
                        </div>
                        <div id="mask">{{AttendancePercentage}}</div>
                    </div>
                    <span>出勤率%</span>
                </li>
            </ul>
        </div>
        <div class="attendance-content-wrap" ref="content" >
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>
export default {
  name: "Attendance--Main",
  data() {
    return {
      switchIndex: "all",
      touchStartnumber: 0,
      touchStart: 0,
      touchDis: 0,
      isScrollToEnd: false,
      upDrapLoad: false
    };
  },
  props: [
    "account",
    "lateCount",
    "missCardCount",
    "outerCount",
    "AttendancePercentage"
  ],
  methods: {
    SelectTab: function(parameter) {
      this.switchIndex = parameter;
      //   this.ResetScrollTop();
    },
    ResetScrollTop: function() {
      this.$refs.content.scrollTop = "0px";
    }
  },
  created: function() {},
  mounted: function() {
    if (this.AttendancePercentage <= 50) {
      this.$refs.leftCircular.style.borderColor = "#ddd";
      this.$refs.rightCircular.style.transform =
        "rotate(" + (this.AttendancePercentage * 3.6 + 45) + "deg)";
    } else {
      this.$refs.rightCircular.style.borderColor = "#73A7F9";
      this.$refs.leftCircular.style.transform =
        "rotate(" + ((this.AttendancePercentage - 50) * 3.6 + 135) + "deg)";
    }
  }
};
</script>
